/*
 * navs组件
 * @Author: ljb
 * @Date: 2018-10-11 11:17:08
 * @Last Modified by: ljb
 * @Last Modified time: 2018-10-11 11:43:48
 */
<style scoped>

    .v-navs {
        display: flex;
        width: 100%;
    }

    .v-navs > div {
        position: relative;
        cursor: pointer;
    }

    div::before {
        content: "";
        position: absolute;
        left: 100%;
        bottom: -2px;
        width: 0;
        height: 2px;
        transition: all .3s 0s ease;
        background-color: red;
    }

    .selected::before {
        width: 100%;
        left: 0;
    }

    .selected ~ div::before {
        left: 0;
    }

</style>
<template>
	<div class="v-navs">
		<div
			v-for="list in lists"
			:key="list[showValue]"
			:class="{ 'selected': list[showValue] === value }"
			:style="{ width: `${100/lists.length}%` }"
			@click="selectItem(list[showValue])">{{ list[showLabel] }}</div>
	</div>
</template>

<script>
export default {
	name: 'VueNavs',
	props: {
		value: {
			type: [String, Number],
			default() {
				return '';
			},
		},
		lists: {
			type: Array,
			required: true,
		},
		showLabel: {
			type: String,
			default() {
				return 'label';
			},
		},
		showValue: {
			type: String,
			default() {
				return 'value';
			},
		},
	},
	data() {
		return {
		};
	},
	methods: {
		/**
         * 选中导航栏
         * @param  {String} item {选中的值}
         * @return {undefined}
         */
		selectItem(item) {
			this.$emit('input', item);
		},
	},
};
</script>
